<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>CustomRender for button 测试</title>
<link href="assets/common.css" rel="stylesheet"/>
<link href="assets/custombutton.css" rel="stylesheet"/>
</head>
<body>

<h1 id="describe">demo for button 测试</h1>

<div id="button_container">

</div>
<label>禁用：<input type="checkbox" id='dis'/></label>

<h2>从已知元素生成</h2>

<div id="exist">渐进增强</div>


<script src="../../build/kissy.js"></script>
<script>
    KISSY.Config.base = "../";
    KISSY.Config.tag = Math.random();
    KISSY.use("node,button", function(S, Node, Button) {
        //view
        //render to container : button_container
        //model and control
        //view as a parameter
        var b = new Button({
            content:"测试",
            describedby:"describe",
            render:"#button_container",
            prefixCls:"goog-"
        });

        b.render();

        b.on("click", function() {
            setTimeout(function() {
                alert("button click");
            }, 0);
        });

        var dis = Node.one("#dis");

        dis.on("click", function() {
            if (dis[0].checked) {
                b.set("disabled", true);
            } else {
                b.set("disabled", false);
            }
        });

        if (dis[0].checked) {
            b.set("disabled", true);
        } else {
            b.set("disabled", false);
        }

        var exist = new Button({
            srcNode:"#exist",
            prefixCls:"goog-"
        });
        exist.render();
        exist.on("click", function() {
            alert("渐进增强 click");
        });
    });
</script>
</body>
</html>